<template>
    <div class="page-layout">
        <header>
            <slot name="header"/>
            
        </header>
        <main :class="[hasFooterSlot || 'no-footer']">
            <slot/>
        </main>
        <footer v-if="hasFooterSlot">
            <slot name="footer"/>
        </footer>
    </div>
</template>

<script>
export default {
    computed: {
        hasFooterSlot() {
            return !!this.$slots.footer
        }
    }
}
</script>

<style lang="less">
    .page-layout {
        display: block;
        position: relative;
        height: 100%;
        background: white;
        > footer,
        > main,
        > header {
            height: 48px;
            padding: 8px 12px;
        }
        > footer,
        > header {
            text-align: right;
        }
        > header {
            border-bottom: solid 1px #ddd;
            .el-input {
                width: 220px;
                margin-right: 10px;
            }
        }
        > footer {
            border-top: solid 1px #ddd;
        }
        > main {
            height: calc(100% - 48px - 48px);
            overflow-x: hidden;
            .el-table{
                .el-button--text{
                    margin-right: 9px;
                }
                .el-button{
                    margin-left: 0;
                }
            }
            &.no-footer {
                height: calc(100% - 48px);
            }
            .el-date-editor.el-input {
                width: 100%;
            }
        }
    }
</style>